e<template>
  <el-dialog width="500" v-model="dialogVisible" :title="isEdit ? '编辑高管信息' : '添加高管信息'">
    <el-form :model="form" label-width="auto">
      <el-form-item label="企业名称" prop="name">
        <el-select
          :disabled="isEdit"
          style="width: 200px"
          v-model="options.value"
          placeholder="请选择企业"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="高管姓名">
        <el-input placeholder="请输入" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:3005/user/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :limit="1"
        >
          <div style="display: flex; justify-content: center">
            <img v-if="form.photo" :src="`http://localhost:3005/${form.photo}`" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="学历">
        <el-select v-model="form.education" placeholder="请选择">
          <el-option
            v-for="item in educationList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="职位">
        <el-input placeholder="请输入" v-model="form.position"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getEnterpriseAll, addExecutive, updateExecutive } from '@/api/enterprise'
import { ElMessage } from 'element-plus'
const form = ref({
  name: '',
  photo: '',
  education: '',
  position: '',
})
const isEdit = ref(false)
const options = ref([])
const dialogVisible = ref(false)
const emit = defineEmits('submit')
const educationList = ref([
  { label: '小学', value: '小学' },
  { label: '初中', value: '初中' },
  { label: '高中', value: '高中' },
  { label: '专科', value: '专科' },
  { label: '本科', value: '本科' },
  { label: '硕士', value: '硕士' },
  { label: '博士', value: '博士' },
])
const getEnterpriseData = async () => {
  const res = await getEnterpriseAll()
  if (res.status === 201 || res.status === 200) {
    // 处理数据，获取每个企业的信息
    options.value = res.data.data.map((enterprise) => {
      return {
        label: enterprise.name,
        value: enterprise.id,
      }
    })
  }
}
const openDialog = (data = null) => {
  if (data) {
    isEdit.value = true
    form.value = JSON.parse(JSON.stringify(data))
    options.value.value = data.enterprise.id
  } else {
    isEdit.value = false
    form.value = {
      name: '',
      photo: '',
      education: '',
      position: '',
    }
    options.value.value = ''
  }
  dialogVisible.value = true
}
const handleAvatarSuccess = (e) => {
  form.value.photo = e.data
  ElMessage.success('上传成功')
}

// 关闭弹窗方法
const closeDialog = () => {
  dialogVisible.value = false
}
const onSubmit = async () => {
  let res
  if (isEdit.value) {
    res = await updateExecutive(form.value)
  } else {
    res = await addExecutive({ ...form.value, enterpriseId: options.value.value })
  }

  if (res.status === 200 || res.status === 201) {
    ElMessage.success(isEdit.value ? '编辑成功' : '添加成功')
    emit('submit')
    closeDialog()
  } else {
    ElMessage.error(res.data.data || '系统繁忙，请稍后再试')
  }
}
onMounted(() => {
  getEnterpriseData()
})
defineExpose({ openDialog, closeDialog })
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;

  text-align: center;
}
</style>

